<template>
  <v-toolbar :flat="true" dense>
    <v-chip-group class="ml-n1" :value="path" active-class="primary--text">
      <v-chip label outlined :to="home" :value="home"> 首页 </v-chip>
      <v-chip label outlined close v-for="(m, i) in opens" :key="i" :value="m.path" @click="tabOpen(m)" @click:close="tabClose(m)">{{m.name}}</v-chip>
    </v-chip-group>
    <v-spacer></v-spacer>
    <v-btn icon small>
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </v-toolbar>
</template>
<script>
  export default {
    props: {
      path: String
    },
    data() {
      return {
        home: '/console',
        opens: []
      }
    },
    methods: {
      tabOpen(m) {
        this.$router.push(m.path)
      },
      tabClose(m) {
        // 移除
        let index = this.$vcext.searchByProp(this.opens, 'path', m.path)
        this.opens.splice(index, 1)
        if (this.opens.length === 0) {
          this.$router.push(this.home)
        } else {
          let target = index === 0 ? 0 : index - 1
          this.$router.push(this.opens[target].path)
        }
      }
    },
    onNavigatorOpen(node) {
      let menu = node.menu
      if (menu.path === this.home) return
      if (this.$vcext.searchByProp(this.opens, 'path', menu.path) !== -1) return
      this.opens.push(menu)
    }
  }
</script>
